<!DOCTYPE html>
<html>
<head>
	<title>	</title>
	<style>
		* {
			padding: 0;
			margin: 0;
		}
		html , body {
			height: 100%;
			overflow: hidden;
		}
		#wrap {
			position: absolute;
			right: 10px;
			bottom: 10px;
			width: 50px;
			height: 50px;

		}
		.inner {
			position: absolute;
			margin: 4px;
		}
		.inner img {
			position: absolute;
			width: 42px;
			height: 42px;
			transition: 1s;
			border-radius: 50%;

		}
		.home {
			position: absolute;
			width: 100%;
			height: 100%;
			background: url(./img/home.png);
			border-radius: 50%;
			transition: 1s;

		}
	</style>
</head>
<body>
	<input type="text" id = 'speed' name="">
	<button onclick= "changeSpeed(speed.value)">
		点击
	</button>
	

	<div id = 'wrap'>	
		<div class = 'inner'>
			<img src="./img/clos.png">
			<img src="./img/full.png">
			<img src="./img/open.png">
			<img src="./img/prev.png">
			<img src="./img/refresh.png">
		</div>
		<div class = 'home'>
		</div>
	</div>

	<script	>	
			var homeNode = document.querySelector(".home")
			var valid = false;
			var imgNodes = document.querySelectorAll('img')
			homeNode.onclick = function () {
				valid = !valid
				if(valid) {
					var ang = 360 * 10 ;
					this.style.transform = 'rotate(3600deg)'	
				} else {
					this.style.transform = 'rotate(-3600deg)'
				}
				transformBehaving(imgNodes, valid)
			}

			changeSpeed =  function (speed) {

				for (var i =0; i < imgNodes.length ; i++) {
					imgNodes[i].style.transition = speed + 's'
				}
				homeNode.style.transition = speed + 's'

			}


			function transformBehaving(nodes,out) {
				
				if(!out) {
					for (var i =0; i < nodes.length ; i++) {
						nodes[nodes.length - i - 1].style.transition = '1s ' + (0.15 * i) + 's'
						nodes[i].style.transform = `translate(0px, 0px) rotate(-3600deg)`

					}
					return
				}
				var inc = 90 / (nodes.length - 1)
				for (var i =0; i < nodes.length ; i++) {
					nodes[i].style.transition = 1 + 's ' + (0.15 * i) +'s'
					var translate = getTranslate(inc * i, 150)
					nodes[i].style.transform = `translate(-${translate.translateX}px, -${translate.translateY}px) rotate(3600deg)`
				}

			}

			function getTranslate(deg,r) {

				var x =  Math.sin((Math.PI / 180 * deg )) * r
				var y =  Math.cos((Math.PI / 180 * deg )) * r
				return  {translateX : x, translateY: y}
			}
	</script>

</body>
</html>